<template>
  <div>
    <div v-if="setting.fieldState === 0">
      <a-upload
        :remove="handleRemove"
        :disabled="setting.options.disabled"
        :multiple="true"
        :file-list="fileList"
        @change="handleChange"
      >
        <a-button>
          <UploadOutlined />
          Upload
        </a-button>
      </a-upload>
    </div>
    <div v-else>
      <a-upload
        :remove="handleRemove"
        :disabled="setting.options.disabled"
        :multiple="true"
        :file-list="fileList"
        @change="handleChange"
      >
        <a-button>
          <UploadOutlined />
          Upload
        </a-button>
      </a-upload>
    </div>
  </div>
</template>
<script>
  import { GetUrlList, Upload } from '@/api/upload/api'
  import { UploadOutlined } from '@ant-design/icons-vue'

  export default {
    components: {
      UploadOutlined,
    },
    data() {
      return {
        fileList: [],
        dataModel: this.models[this.setting.table + '-' + this.setting.field],
      }
    },
    props: {
      formType: {
        type: Number,
        default: 0,
      },
      setting: {
        type: Object,
        default: null,
      },

      models: {
        type: Object,
        default: Object,
      },
    },
    created() {
      this.load()
    },
    methods: {
      load() {
        this.fileList = []
        if (this.dataModel !== '') {
          var queryData = {
            ids: this.dataModel,
          }
          GetUrlList(queryData).then((res) => {
            console.log('res', res)
            if (res.isSuccess) {
              res.content.forEach((element) => {
                this.fileList.push({
                  uid: element.id,
                  name: element.expectedFileName,
                  status: 'done',
                  url: element.downloadUrl,
                })
              })
            }
          })
        }
      },
      handleChange(info) {
        if (info.file.status === 'uploading') {
          var that = this
          const formData = new FormData()
          formData.append('fileContainerName', 'default')
          formData.append('fileType', 2)
          formData.append('ownerUserId', '')
          formData.append('generateUniqueFileName', false)
          formData.append('file', info.file.originFileObj)
          Upload(formData)
            .then((res) => {
              console.log('uploadres', res)
              var element = res.content.downloadInfo
              that.fileList.push({
                uid: res.content.fileInfo.id,
                name: element.expectedFileName,
                status: 'done',
                url: element.downloadUrl,
              })
              that.$message.success('文件上传成功')
              var photoIds = ''
              that.fileList.forEach((element) => {
                photoIds += element.uid + ','
              })
              this.models[
                this.setting.table + '-' + this.setting.field
              ] = photoIds
            })
            .finally(() => {
              that.uploading = false
            })
        } else {
          console.log('删除')
          const fileList = [...this.fileList]
          this.fileList = fileList.filter((item) => item.uid !== info.file.uid)
        }
      },
      // 文件删除
      handleRemove(file) {
        this.isUpload = false
        const index = this.fileList.indexOf(file)
        const newFileList = this.fileList.slice()
        newFileList.splice(index, 1)
        this.fileList = newFileList
        var photoIds = ''
        this.fileList.forEach((element) => {
          photoIds += element.uid + ','
        })
        this.models[this.setting.table + '-' + this.setting.field] = photoIds
      },
    },
  }
</script>
